<template>
	<view class="page flex-column">
		<v-tabs v-model="cityType" 
		:tabs="cityTypeTags" 
		color='#999999'
		activeColor="#FF8B3E"
		lineColor="#FF8B3E"
		lineHeight="3px"
		:lineScale="0.2"
		:scroll="false" 
		@change="changeCityType"
		style="width: 80vw;margin:auto;"
		></v-tabs>
		<view class="mg-30">
			<view class="color-gray font-small">当前选择城市</view>
			<view class="flex mg-top-20">
				<image class="icon-location" src="/static/icon/location.png" mode="widthFix"></image>
				<text class="flex1 font-big">{{currentCityName}}</text>
				<!-- <text class="font-big color-orange">重新定位</text> -->
			</view>
		</view>
		<view class="flex1 city-container">
			<uni-indexed-list :options.sync="cities[cityTypes[cityType]]" :showSelect="false" @click="selectCity"></uni-indexed-list>
		</view>
	</view>
</template>

<script>
	import OrderApi from '@/api/order.js'
	
	export default {
		data() {
			return {
				company: 0,
				currentType: '',
				currentCityName: '',
				cityType: 1,
				cityTypes: ["A", "B", "C"],
				cityTypeTags: ["A类城市", "B类城市", "C类城市"],
				cityAll: [],
				cities: {
					A: [],
					B: [],
					C: []
				}
			};
		},
		created() {
			const query = this.$route.query
			this.company = query.company
			this.currentType = query.type
			this.currentCityName = query.city
			this.cityType = this.cityTypes.indexOf(query.type)
			this.getCities()
		},
		methods: {
			selectCity(e) {
				let cityName = e.item.name
				let cities = this.cities[this.cityTypes[this.cityType]]
				console.log(cityName);
				for (const city of this.cityAll) {
					if (city.city_name == cityName ) {
						if (city.type != this.currentType) {
							uni.showToast({
								title: '您只能选择' + this.currentType + '类城市哦',
								icon: 'none'
							})
							return;
						}
						uni.$emit('setCity', city)
						uni.setStorage({
						    key: 'city',
						    data: { city },
						    success: function () {
						        console.log('success');
								uni.navigateBack({
									delta:1
								})
						    }
						});
						break;
					}
				}
			},
			getCities() {
				const typeLetter = this.cityTypes[this.cityType]
				if (this.cities[typeLetter].length > 0) {
					return false;
				}
				OrderApi.cities(this.company, typeLetter).then(res => {
					
					this.cityAll = this.cityAll.concat(res.data)
					let cityJson = {}
					res.data.forEach(item => {
						let letter = item.city_letter;
						if (typeof cityJson[letter] === 'undefined') {
							cityJson[letter] = []
						}
						cityJson[letter].push(item.city_name)
					})
					
					let cityArr = []
					Object.keys(cityJson).forEach(key => {
					
						cityArr.push({letter: key, data: cityJson[key]})
					})
					this.cities[typeLetter] = cityArr;
				}).catch(res => {
					
				})
			},
			changeCityType(index) {
				this.cityType = index
				this.getCities()
			}
		}
	}
</script>

<style lang="scss">
	.page{
		height: calc(100vh - 44px - var(--status-bar-height));
	}
	.icon-location{
		width: 30rpx;
	}
	.city-container{
		position: relative;
		// height: 800rpx;
		
		/deep/ .uni-indexed-list__menu-item{
			background: #fff;
		}
	}
</style>
